<template>
  <div class="file-share-view watermarked">
    <div class="share-header">
      <div class="header-top">
        <h1>文件分享</h1>
        <router-link to="/" class="back-home" v-if="isLoggedIn">返回首页</router-link>
      </div>
      <!-- 弹幕区域 -->
      <Danmaku ref="danmakuRef" :messages="danmakuMessages" />
      <div v-if="fileInfo" class="file-info">
        <div class="file-name-display">
          <div class="file-name-icon" :class="getFileIconClass(getFileExtension(fileInfo.url))">
            <i :class="getFileIconType(getFileExtension(fileInfo.url))"></i>
          </div>
          <span class="file-name-text">{{ fileInfo.file_name || getFileName(fileInfo.url) }}</span>
          <button class="quick-download-btn" @click="downloadFile" title="下载文件">
            <i class="fas fa-download"></i>
          </button>
        </div>
        <p>分享者: {{ fileInfo.user }}</p>
        <p>分享时间: {{ formatDate(fileInfo.time) }}</p>
        <p class="view-count">浏览次数: {{ fileInfo.pv }} <span class="file-tips">资料预览在视频下方</span></p>
      </div>
    </div>
    
    <div class="share-content" ref="contentContainer">
      <div v-if="loading" class="loading">
        <div class="spinner"></div>
        <p>正在加载文件信息...</p>
      </div>
      
      <div v-else-if="error" class="error-message">
        <p>{{ error }}</p>
        <button class="retry-btn" @click="fetchFileInfo">重试</button>
      </div>
      
      <div v-else-if="fileInfo" class="content-preview">

        <!-- 广告区域 - 不再使用v-if条件 -->
        <div class="ad-container">
          <h3 class="ad-label"></h3>
          
          <!-- 如果无广告或类型不匹配，显示提示 -->
          <div v-if="!hasAd" class="no-ad-message">
            cquptyyy
          </div>
          
          <!-- 普通链接广告 -->
          <div v-else-if="fileInfo.ad_type === 0" class="ad-link">
            <a :href="fileInfo.ad_url" target="_blank" class="ad-http-link">
              <div class="ad-banner">
                <span class="ad-text">查看推广内容</span>
                <span class="ad-url">{{ fileInfo.ad_url }}</span>
              </div>
            </a>
          </div>
          
          <!-- B站iframe广告 -->
          <div v-else-if="fileInfo.ad_type === 1" class="ad-iframe">
            <div class="responsive-iframe-container">
              <iframe 
                :src="fileInfo.ad_url" 
                frameborder="0" 
                allowfullscreen 
                class="bilibili-iframe">
              </iframe>
            </div>
          </div>
        </div>
         <div class="action-buttons">
          <button class="download-btn" @click="downloadFile">
            下载文件
          </button>
          
          <button class="qrcode-btn" @click="showQrcode = !showQrcode">
            {{ showQrcode ? '隐藏二维码' : '手机扫码查看' }}
          </button>
        </div>
        
        <!-- 二维码弹窗 -->
        <div class="qrcode-modal" v-if="showQrcode" @click.self="showQrcode = false">
          <div class="qrcode-container">
            <div class="qrcode-header">
              <h3>手机扫码查看</h3>
              <button class="close-btn" @click="showQrcode = false">×</button>
            </div>
            <div class="qrcode-content">
              <qrcode-vue :value="currentPageUrl" :size="200" level="H" />
              <p class="qrcode-tip">请使用手机扫描二维码查看</p>
            </div>
          </div>
        </div>
        <!-- 文件内容预览区域 -->
        <div class="file-content-area">
          <!-- 图片预览 -->
          <div v-if="isImage" class="image-preview">
            <img :src="fileInfo.url" :alt="'共享图片'" />
          </div>
          
          <!-- 视频预览 -->
          <div v-else-if="isVideo" class="video-preview">
            <div class="video-container">
              <video controls>
                <source :src="fileInfo.url" :type="`video/${getFileExtension(fileInfo.url)}`">
                您的浏览器不支持视频预览
              </video>
            </div>
          </div>
          
          <!-- 音频预览 -->
          <div v-else-if="isAudio" class="audio-preview">
            <audio controls>
              <source :src="fileInfo.url" :type="`audio/${getFileExtension(fileInfo.url)}`">
              您的浏览器不支持音频预览
            </audio>
          </div>
          
          <!-- PDF预览 -->
          <div v-else-if="isPdf" class="pdf-preview">
            <div class="pdf-container">
              <iframe :src="fileInfo.url" frameborder="0"></iframe>
            </div>
          </div>

          <!-- Markdown预览 -->
          <div v-else-if="isMarkdown" class="markdown-preview">
            <div v-if="markdownContent" class="markdown-container" v-html="renderMarkdown(markdownContent)"></div>
            <div v-else class="markdown-loading">
              <div class="spinner"></div>
              <p>正在加载Markdown内容...</p>
            </div>
          </div>
          
          <!-- 其他文件 -->
          <div v-else class="file-preview">
            <div class="file-icon" :class="getFileIconClass(getFileExtension(fileInfo.url))">
              <i :class="getFileIconType(getFileExtension(fileInfo.url))"></i>
            </div>
            <p>此文件需要下载后查看</p>
          </div>
        </div>
        
      
      </div>
      
      <!-- 返回顶部按钮 -->
      <button 
        v-if="showBackToTop" 
        class="back-to-top-btn"
        @click="scrollToTop"
        title="返回顶部"
      >
        ↑
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import QrcodeVue from 'qrcode.vue';
import { marked } from 'marked';
import Danmaku from './Danmaku.vue';

const route = useRoute();
const urlmd5 = route.query.urlmd5;

// 调试模式
const isDebug = ref(false);

// 状态
const loading = ref(true);
const error = ref('');
const fileInfo = ref(null);
const isLoggedIn = ref(false);
const showQrcode = ref(false);
const markdownContent = ref('');
const danmakuRef = ref(null);

// 弹幕消息，先使用默认值，后续从服务端获取
const danmakuMessages = ref([
  "cquptyyy"
]);

// 从服务加载弹幕消息的函数，目前为模拟实现
const loadDanmakuMessages = async () => {
  try {
    // 这里可以引入服务模块获取数据
    // import { getDanmakuMessages } from '../utils/danmakuService';
    // danmakuMessages.value = await getDanmakuMessages();
    
    // 模拟异步加载
    setTimeout(() => {
      danmakuMessages.value = [
        "cquptyyy"
      ];
    }, 3000);
  } catch (error) {
    console.error('加载弹幕消息失败:', error);
  }
};

// 顶部滚动相关
const contentContainer = ref(null);
const showBackToTop = ref(false);

// 获取当前页面完整URL
const currentPageUrl = computed(() => {
  return window.location.href;
});

// 判断是否有广告
const hasAd = computed(() => {
  return fileInfo.value && 
         fileInfo.value.ad_url && 
         (fileInfo.value.ad_type === 0 || fileInfo.value.ad_type === 1);
});

// 获取文件信息
const fetchFileInfo = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    // 发送请求获取分享文件信息
    const response = await axios.post('/api/sharepic?cmd=browse', {
      urlmd5: urlmd5
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    console.log('分享文件信息响应:', response.data);
    
    if (response.data.code === 0) {
      fileInfo.value = response.data;
      console.log('广告信息:', {
        ad_type: response.data.ad_type,
        ad_url: response.data.ad_url
      });
    } else {
      error.value = '获取文件信息失败，可能文件已被删除或链接已过期';
      console.error('获取分享文件信息失败:', response.data);
    }
  } catch (err) {
    console.error('获取分享文件信息请求错误:', err);
    error.value = '网络错误，请稍后重试';
  } finally {
    loading.value = false;
  }
  
  // 返回Promise，方便链式调用
  return Promise.resolve();
};

// 下载文件
const downloadFile = () => {
  if (!fileInfo.value || !fileInfo.value.url) return;
  
  const a = document.createElement('a');
  a.href = fileInfo.value.url;
  // 优先使用服务器返回的文件名
  const fileName = fileInfo.value.file_name || getFileName(fileInfo.value.url);
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

// 获取文件名
const getFileName = (url) => {
  return url.substring(url.lastIndexOf('/') + 1);
};

// 获取文件扩展名
const getFileExtension = (url) => {
  const fileName = getFileName(url);
  return fileName.slice((fileName.lastIndexOf('.') - 1 >>> 0) + 2).toLowerCase();
};

// 格式化日期，只显示日期部分，不显示时分秒
const formatDate = (dateString) => {
  if (!dateString) return '';
  // 尝试提取日期部分 (YYYY-MM-DD)
  const dateMatch = dateString.match(/^\d{4}-\d{2}-\d{2}/);
  if (dateMatch) {
    return dateMatch[0];
  }
  return dateString; // 如果无法解析，返回原始字符串
};

// 文件类型判断
const isImage = computed(() => {
  if (!fileInfo.value) return false;
  const ext = getFileExtension(fileInfo.value.url);
  const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
  return imageTypes.includes(ext);
});

const isVideo = computed(() => {
  if (!fileInfo.value) return false;
  const ext = getFileExtension(fileInfo.value.url);
  const videoTypes = ['mp4', 'webm', 'ogg', 'mov', 'avi'];
  return videoTypes.includes(ext);
});

const isAudio = computed(() => {
  if (!fileInfo.value) return false;
  const ext = getFileExtension(fileInfo.value.url);
  const audioTypes = ['mp3', 'wav', 'ogg', 'aac'];
  return audioTypes.includes(ext);
});

const isPdf = computed(() => {
  if (!fileInfo.value) return false;
  const ext = getFileExtension(fileInfo.value.url);
  return ext === 'pdf';
});

const isMarkdown = computed(() => {
  if (!fileInfo.value) return false;
  const ext = getFileExtension(fileInfo.value.url);
  return ext === 'md' || ext === 'markdown';
});

// 获取文件图标类（背景颜色类）
const getFileIconClass = (fileType) => {
  const typeMap = {
    // 图片
    'png': 'image-icon',
    'jpg': 'image-icon',
    'jpeg': 'image-icon',
    'gif': 'image-icon',
    'webp': 'image-icon',
    'svg': 'image-icon',
    'bmp': 'image-icon',
    
    // 视频
    'mp4': 'video-icon',
    'avi': 'video-icon',
    'mov': 'video-icon',
    'mkv': 'video-icon',
    'wmv': 'video-icon',
    'flv': 'video-icon',
    
    // 音频
    'mp3': 'audio-icon',
    'wav': 'audio-icon',
    'ogg': 'audio-icon',
    'aac': 'audio-icon',
    'flac': 'audio-icon',
    
    // 文档
    'pdf': 'pdf-icon',
    'doc': 'doc-icon',
    'docx': 'doc-icon',
    'xls': 'excel-icon',
    'xlsx': 'excel-icon',
    'ppt': 'ppt-icon',
    'pptx': 'ppt-icon',
    'txt': 'text-icon',
    'md': 'markdown-icon',
    'markdown': 'markdown-icon',
    
    // 压缩文件
    'zip': 'archive-icon',
    'rar': 'archive-icon',
    'tar': 'archive-icon',
    'gz': 'archive-icon',
    '7z': 'archive-icon',
    'bz2': 'archive-icon',
    'xz': 'archive-icon',
    'tgz': 'archive-icon',
    
    // 其他
    'dll': 'binary-icon',
    'exe': 'binary-icon'
  };
  
  return typeMap[fileType?.toLowerCase()] || 'file-icon';
};

// 获取Font Awesome图标类
const getFileIconType = (fileType) => {
  const iconMap = {
    // 图片
    'png': 'fas fa-file-image',
    'jpg': 'fas fa-file-image',
    'jpeg': 'fas fa-file-image',
    'gif': 'fas fa-file-image',
    'webp': 'fas fa-file-image',
    'svg': 'fas fa-file-image',
    'bmp': 'fas fa-file-image',
    
    // 视频
    'mp4': 'fas fa-file-video',
    'avi': 'fas fa-file-video',
    'mov': 'fas fa-file-video',
    'mkv': 'fas fa-file-video',
    'wmv': 'fas fa-file-video',
    'flv': 'fas fa-file-video',
    
    // 音频
    'mp3': 'fas fa-file-audio',
    'wav': 'fas fa-file-audio',
    'ogg': 'fas fa-file-audio',
    'aac': 'fas fa-file-audio',
    'flac': 'fas fa-file-audio',
    
    // 文档
    'pdf': 'fas fa-file-pdf',
    'doc': 'fas fa-file-word',
    'docx': 'fas fa-file-word',
    'xls': 'fas fa-file-excel',
    'xlsx': 'fas fa-file-excel',
    'ppt': 'fas fa-file-powerpoint',
    'pptx': 'fas fa-file-powerpoint',
    'txt': 'fas fa-file-alt',
    'md': 'fab fa-markdown',
    'markdown': 'fab fa-markdown',
    
    // 压缩文件
    'zip': 'fas fa-file-archive',
    'rar': 'fas fa-file-archive',
    'tar': 'fas fa-file-archive',
    'gz': 'fas fa-file-archive',
    '7z': 'fas fa-file-archive',
    'bz2': 'fas fa-file-archive',
    'xz': 'fas fa-file-archive',
    'tgz': 'fas fa-file-archive',
    
    // 其他
    'dll': 'fas fa-file-code',
    'exe': 'fas fa-file-code'
  };
  
  return iconMap[fileType?.toLowerCase()] || 'fas fa-file';
};

// 监听滚动事件
const handleScroll = (event) => {
  const fileShareView = document.querySelector('.file-share-view');
  if (fileShareView) {
    showBackToTop.value = fileShareView.scrollTop > 300;
  }
};

// 返回顶部方法
const scrollToTop = () => {
  const fileShareView = document.querySelector('.file-share-view');
  if (fileShareView) {
    fileShareView.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
};

// 渲染Markdown
const renderMarkdown = (content) => {
  if (!content) return '';
  try {
    return marked(content);
  } catch (error) {
    console.error('Markdown渲染错误:', error);
    return '<p class="error-message">Markdown渲染失败</p>';
  }
};

// 加载Markdown内容
const loadMarkdownContent = async () => {
  if (!fileInfo.value || !fileInfo.value.url) return;
  
  try {
    const response = await axios.get(fileInfo.value.url);
    if (response.data) {
      markdownContent.value = response.data;
    }
  } catch (error) {
    console.error('加载Markdown内容失败:', error);
    markdownContent.value = '# 加载失败\n\n无法获取Markdown文件内容，请尝试下载后查看。';
  }
};

// 组件挂载时获取文件信息
onMounted(() => {
  const token = localStorage.getItem('token');
  isLoggedIn.value = !!token;
  
  if (urlmd5) {
    fetchFileInfo().then(() => {
      // 获取文件信息后，如果是Markdown文件则加载内容
      if (isMarkdown.value) {
        loadMarkdownContent();
      }
    });
  } else {
    error.value = '无效的分享链接';
    loading.value = false;
  }
  
  // 添加滚动监听到file-share-view元素
  setTimeout(() => {
    const fileShareView = document.querySelector('.file-share-view');
    if (fileShareView) {
      fileShareView.addEventListener('scroll', handleScroll);
      // 初始检查是否显示返回顶部按钮
      handleScroll();
    }
  }, 100);
  
  // 加载弹幕消息
  loadDanmakuMessages();
});

// 组件卸载时移除滚动监听
onUnmounted(() => {
  const fileShareView = document.querySelector('.file-share-view');
  if (fileShareView) {
    fileShareView.removeEventListener('scroll', handleScroll);
  }
});
</script>

<style scoped>
html, body {
  overflow-y: visible !important; /* 强制页面能够垂直滚动 */
}

.file-share-view {
  max-width: 1000px;
  width: 92%;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto; /* 添加垂直滚动条 */
}

.share-header {
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.share-header h1 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.file-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #555;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.file-name-display {
  font-weight: 600;
  color: #2c3e50;
  position: relative;
  padding: 8px 8px;
  flex-basis: 100%;
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  border-left: 5px solid #3498db;
  justify-content: space-between;
}

.file-name-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.file-name-icon i {
  font-size: 16px;
}

.file-name-text {
  font-size: 16px;
  word-break: break-all;
  flex: 1;
  margin-right: 10px;
}

.quick-download-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quick-download-btn:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.file-info p {
  margin: 0;
  padding: 5px 12px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: inline-flex;
  align-items: center;
}

.file-info p::before {
  margin-right: 5px;
  font-size: 14px;
}

/* 使用伪类选择器添加图标 */
.file-info p:nth-of-type(2)::before { content: "👤"; } /* 分享者图标 */
.file-info p:nth-of-type(3)::before { content: "🕒"; } /* 时间图标 */
.file-info p:nth-of-type(4)::before { content: "👁"; } /* 浏览次数图标 */

/* 给不同信息添加不同的颜色 */
.file-info p:nth-of-type(2) {
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
}

.file-info p:nth-of-type(3) {
  background-color: #e8f5e9;
  border: 1px solid #c8e6c9;
}

.file-info p:nth-of-type(4) {
  background-color: #fff3e0;
  border: 1px solid #ffe0b2;
}

/* 资料链接提示样式 */
.file-tips {
  padding: 2px 8px;
  background-color: #ffebee;
  color: #d32f2f;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  margin-left: 20px;
  font-size: 16px;
  display: inline-block;
  border: 1px dashed #e57373;
}

/* 浏览次数和提示在同一行 */
.view-count {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.share-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible; /* 修改为可见，不再添加滚动条 */
  min-height: auto;
}

/* 自定义滚动条样式 - 适用于file-share-view */
.file-share-view::-webkit-scrollbar {
  width: 8px;
}

.file-share-view::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.file-share-view::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.file-share-view::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 广告容器样式 */
.ad-container {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: visible;
  display: block;
  height: auto;
  border: 2px solid #ff9800; /* 橙色边框，便于调试 */
  padding: 15px;
  background-color: #fff8e1; /* 浅黄色背景 */
}

.ad-label {
  font-size: 14px;
  color: #666;
  margin: 0 0 10px 0;
  position: relative;
  padding-left: 12px;
  font-weight: normal;
}

.ad-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  background-color: #ff9800;
  border-radius: 2px;
}

.ad-link, .ad-iframe {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* 响应式iframe容器 */
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9宽高比 */
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  min-height: 300px; /* 确保最小高度 */
  display: block; /* 确保显示为块级元素 */
}

.bilibili-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

.ad-http-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

.ad-banner {
  background: linear-gradient(45deg, #fafafa, #f0f0f0);
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.ad-banner:hover {
  background: linear-gradient(45deg, #f0f0f0, #e8e8e8);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.ad-text {
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
  font-size: 16px;
}

.ad-url {
  color: #2196f3;
  font-size: 14px;
  word-break: break-all;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.error-message p {
  margin: 0;
  margin-bottom: 20px;
  color: #f44336;
  font-size: 18px;
  text-align: center;
}

.retry-btn {
  padding: 8px 15px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.retry-btn:hover {
  background-color: #1976d2;
}

.content-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* 文件内容预览区域 */
.file-content-area {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  border: 2px solid #2196f3; /* 蓝色边框，便于调试 */
  padding: 15px;
  background-color: #e3f2fd; /* 浅蓝色背景 */
}

/* 所有预览容器的通用样式 */
.image-preview, 
.video-preview, 
.audio-preview, 
.pdf-preview,
.file-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* 图片预览自适应容器 */
.image-preview {
  max-width: 100%;
  text-align: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 100vh; /* 限制最大高度为视口高度的80% */
  object-fit: contain;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}

/* 视频预览自适应容器 */
.video-preview {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* 视频容器 */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9宽高比 */
  overflow: hidden;
  border-radius: 4px;
  background-color: #000;
}

.video-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* 音频预览自适应容器 */
.audio-preview {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 0;
}

.audio-preview audio {
  width: 100%;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}

/* PDF预览自适应容器 */
.pdf-container {
  position: relative;
  width: 100%;
  height: 600px; /* 固定高度，只显示一页 */
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #ddd;
}

.pdf-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* Markdown预览样式 */
.markdown-preview {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.markdown-container {
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  height: 600px; /* 固定高度，与PDF预览保持一致 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

/* Markdown内容样式 */
.markdown-container h1 {
  border-bottom: 2px solid #eaecef;
  padding-bottom: 0.3em;
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-container h2 {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  margin-top: 24px;
  margin-bottom: 16px;
}

.markdown-container h3 {
  font-size: 1.25em;
  margin-top: 24px;
  margin-bottom: 16px;
}

.markdown-container p, 
.markdown-container ul, 
.markdown-container ol {
  margin-bottom: 16px;
}

.markdown-container ul, 
.markdown-container ol {
  padding-left: 2em;
}

.markdown-container code {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  background-color: rgba(27, 31, 35, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 85%;
}

.markdown-container pre {
  background-color: #f6f8fa;
  border-radius: 3px;
  padding: 16px;
  overflow: auto;
  margin-bottom: 16px;
}

.markdown-container pre code {
  background-color: transparent;
  padding: 0;
  font-size: 100%;
  display: block;
  line-height: 1.45;
}

.markdown-container a {
  color: #0366d6;
  text-decoration: none;
}

.markdown-container a:hover {
  text-decoration: underline;
}

.markdown-container blockquote {
  margin: 0;
  margin-bottom: 16px;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

.markdown-container img {
  max-width: 100%;
  box-sizing: border-box;
}

.markdown-container table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 16px;
  width: 100%;
  overflow: auto;
}

.markdown-container table th,
.markdown-container table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.markdown-container table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

.markdown-container table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

/* Markdown加载样式 */
.markdown-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 600px; /* 与markdown容器高度保持一致 */
  background-color: #fafafa;
  border-radius: 8px;
}

/* Markdown容器自定义滚动条 */
.markdown-container::-webkit-scrollbar {
  width: 8px;
}

.markdown-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.markdown-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.markdown-container::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 文件图标容器 */
.file-preview {
  padding: 5% 0;
  text-align: center;
}

.file-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.file-icon i {
  font-size: 32px;
}

.download-btn {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.download-btn:hover {
  background-color: #45a049;
}

/* 二维码按钮样式 */
.qrcode-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}

.qrcode-btn:hover {
  background-color: #0b7dda;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  border: 1px dashed transparent;
}

/* 二维码弹窗样式 */
.qrcode-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.qrcode-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  width: 300px;
  overflow: hidden;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.qrcode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.qrcode-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  line-height: 1;
}

.qrcode-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-tip {
  margin-top: 15px;
  color: #666;
  text-align: center;
  font-size: 14px;
}

/* 文件图标样式 */
.image-icon { background-color: #81c784; }
.video-icon { background-color: #64b5f6; }
.audio-icon { background-color: #9575cd; }
.pdf-icon { background-color: #e57373; }
.doc-icon { background-color: #4fc3f7; }
.excel-icon { background-color: #66bb6a; }
.ppt-icon { background-color: #ff9800; }
.text-icon { background-color: #9e9e9e; }
.archive-icon { background-color: #ffb74d; }
.binary-icon { background-color: #ba68c8; }
.markdown-icon { background-color: #42a5f5; }
.file-icon { background-color: #9e9e9e; }

@media (max-width: 768px) {
  .file-share-view {
    width: 100%;
    padding: 8px;
  }
  
  .share-header, 
  .share-content {
    padding: 8px;
  }
  
  .file-info {
    flex-direction: column;
    gap: 3px;
  }
  
  .file-name-text {
    font-size: 14px;
  }
  
  .quick-download-btn {
    width: 28px;
    height: 28px;
  }
  
  .download-icon {
    font-size: 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .download-btn,
  .qrcode-btn {
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
  }
  
  .qrcode-container {
    width: 90%;
    max-width: 300px;
  }
  
  /* 移动端宽高比调整 */
  .pdf-container {
    padding-top: 150%; /* 在移动端使用更高的比例 */
  }
  
  /* 移动端Markdown调整 */
  .markdown-container,
  .markdown-loading {
    height: 450px;
  }
  
  .back-to-top-btn {
    width: 36px;
    height: 36px;
    bottom: 20px;
    right: 20px;
  }
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.back-home {
  padding: 8px 15px;
  background-color: #1e88e5;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
}

.back-home:hover {
  background-color: #1976d2;
}
 

.no-ad-message {
  padding: 30px;
  text-align: center;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #ddd;
}

/* 返回顶部按钮 */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #2196f3;
  color: white;
  border: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: all 0.3s;
  z-index: 100;
}

.back-to-top-btn:hover {
  background-color: #0b7dda;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 水印样式 */
.watermarked {
  position: relative;
}

.watermarked::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 80px,
    rgba(0, 0, 0, 0.015) 80px,
    rgba(0, 0, 0, 0.015) 160px
  );
  pointer-events: none;
  z-index: 100;
}

.watermarked::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(-45deg, 
      rgba(0, 0, 0, 0.05) 0px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 120px
    ),
    repeating-linear-gradient(45deg, 
      rgba(0, 0, 0, 0.05) 0px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 120px
    );
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 100;
}

/* 添加文字水印 */
.share-content, .share-header, .file-content-area, .markdown-container, .pdf-container, .image-preview {
  position: relative;
}

/* 主水印 */
.share-content::before, .share-header::before {
  content: "cquptyyy";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 20px;
  opacity: 0.07;
  color: #333;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  transform: rotate(-30deg);
  white-space: nowrap;
  overflow: hidden;
}

/* 分散水印效果 */
.file-share-view {
  background-image: 
    repeating-linear-gradient(0deg, 
      transparent 0px,
      transparent 100px,
      rgba(0, 0, 0, 0.01) 100px,
      rgba(0, 0, 0, 0.01) 101px,
      transparent 101px,
      transparent 200px
    ),
    repeating-linear-gradient(90deg, 
      transparent 0px,
      transparent 100px,
      rgba(0, 0, 0, 0.01) 100px,
      rgba(0, 0, 0, 0.01) 101px,
      transparent 101px,
      transparent 200px
    );
}

.file-share-view::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-conic-gradient(
      rgba(0, 0, 0, 0.03) 0%, 
      transparent 0.05%,
      transparent 0.6%, 
      rgba(0, 0, 0, 0.03) 0.6%, 
      rgba(0, 0, 0, 0.03) 0.65%,
      transparent 0.65%
    );
  background-size: 300px 300px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
}

/* 细粒度水印 */
.file-content-area::before,
.markdown-container::before,
.pdf-container::before,
.image-preview::before {
  content: "cquptyyy";
  position: absolute;
  width: 300px;
  height: 300px;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  font-size: 16px;
  opacity: 0.06;
  color: #333;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 50;
  transform: rotate(-30deg);
  white-space: nowrap;
  overflow: hidden;
}
</style> 